<template>
  <div style="height: 500px; padding: 20px">
    <virtual-list
      v-model="mySelect"
      :list="list"
      :size="size"
      :num="num"
      style="width: 200px"
    ></virtual-list>
  </div>
</template>
<script>
import virtualList from "./virtual-list.vue";
export default {
  components: {
    virtualList,
  },
  data() {
    return {
      mySelect: "",
      // 虚拟列表需要的列表数据
      list: [],
      // 虚拟列表每一行数据所占的高度
      size: 30,
      // 虚拟列表可视区域最多展示几行数据
      num: 10,
    };
  },
  watch: {
    mySelect() {
      console.log(this.mySelect);
    },
  },
  created() {
    const listTime = Math.ceil(Math.random() * 1000);
    setTimeout(() => {
      this.list = Array(10000)
        .fill("")
        .map((item, index) => {
          return {
            label: "列表数据" + (index + 1),
            value: index + 1 + "",
          };
        });
    }, listTime);
    const mySelectTime = Math.ceil(Math.random() * 1000);
    setTimeout(() => {
      this.mySelect = "99";
    }, mySelectTime);
  },
  methods: {},
};
</script>
<style scoped></style>
